<template>
  <div class="home">
    <breadcrumb-view />
    <div class="content">
      <div class="menu">
        <div class="menu_title">
          <span>表单管理</span>
          <el-dropdown placement="bottom" @command="addFrom">
            <el-button type="text" icon="el-icon-plus"></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="0">
                <i class="el-icon-tickets"></i>
                新建表单</el-dropdown-item
              >
              <el-dropdown-item command="1">
                <i class="el-icon-document"></i>新建子表单</el-dropdown-item
              >
              <el-dropdown-item command="3">
                <i class="el-icon-document"></i>新建流程表单</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-if="list.length > 0" class="menu_list">
          <template v-for="(item, index) in list">
            <div
              :key="item.tableId"
              :class="[
                'menu_item',
                currentIndex == index ? 'menu_item_active' : '',
              ]"
              @click="getDatils(item.tableId, index, item.flowVersion)"
              v-if="item.tableType != 1"
            >
              {{ item.tableName }}
              <div>
                <el-button type="text" @click.stop="editForm(item.tableId,item.isChild)">
                  <el-image :src="currentIndex == index ? edit1 : edit" />
                </el-button>
                <el-button
                  type="text"
                  style="margin-left: 18px"
                  :disabled="item.canDelete == 0"
                  @click.stop="delFrom(item.tableId)"
                >
                  <el-image
                    :src="
                      currentIndex == index && item.canDelete == 1 ? del1 : del
                    "
                  />
                </el-button>
              </div>
            </div>
          </template>
        </div>
        <div
          v-else
          style="
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 100px;
            color: #606266;
          "
        >
          <span>暂无数据</span>
        </div>
      </div>
      <el-container>
        <el-main>
          <div class="con-t" v-if="tableId !== ''">
            <!-- <i class="el-icon-s-unfold" @click="isCollapse = !isCollapse"></i> -->
            <div>
              <el-button
                size="mini"
                @click="intoDataManage()"
                v-if="tableType == 0"
                >数据配置</el-button
              >
              <el-button
                size="mini"
                @click="intoflowData"
                v-if="tableType === 3&&launchStatus == 1"
                >流程设置</el-button
              >
              <el-button
                @click="submitForm"
                type="primary"
                size="mini"
                v-if="launchStatus == 0"
                >发布表单</el-button
              >
            </div>
          </div>
          <div class="containermain">
            <preview
              :itemList="formList"
              :formConf="formConf"
              v-if="formList.length > 0"
            />
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import { api } from "../server/api";
import breadcrumbView from "../components/breadcrumbView";

import formConf from "@/components/custom/formConf";
import preview from "@/components/preview";
import { getDate, resetData } from "../untils/transfrom";
// import { formItems } from "@/components/custom/itemList";
import {
  formItems,
  assistFormItems,
  layoutFormItems,
} from "@/components/custom/itemList";
export default {
  name: "fromlist",
  components: { preview, breadcrumbView },
  data() {
    return {
      formConf,
      isCollapse: false,
      list: [],
      inputvalue: "",
      formList: [],
      tableId: "",
      formItems: [...formItems, ...assistFormItems, ...layoutFormItems],
      tableName: "",
      tableType: "",
      launchStatus: "",
      flowVersion: null,
      canDelete: null,
      edit: require("../assets/img/edit.png"),
      del: require("../assets/img/del.png"),
      edit1: require("../assets/img/edit1.png"),
      del1: require("../assets/img/del1.png"),
      currentIndex: -1,
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      api.stdappTableLst({ moduleId: this.$route.query.id }).then((res) => {
        this.list = res;
      });
    },
    getDatils(id, index, flowVersion) {
      this.flowVersion = flowVersion;
      this.tableId = id;
      this.formList = [];
      this.currentIndex = index;
      api.stdappTableDetail({ tableId: id }).then((res) => {
        let { formItems, fieldLst, tableType, canDelete, launchStatus } = res;
        this.launchStatus = launchStatus;
        this.tableName = res.tableName;
        let arr = [];
        for (let i = 0; i < fieldLst.length; i++) {
          const element = fieldLst[i];
          let data = getDate(element.fieldType, this.formItems);
          if (!arr[element.seqNo - 1]) {
            arr[element.seqNo - 1] = resetData(data, element);
          }
        }
        arr.forEach((val) => {
          if (val.fieldType === "CombineValue") {
            val.privateInfo = JSON.parse(val.privateInfo);
            val.privateInfo.user = JSON.stringify({
              text: val.fieldName,
              label: val.fieldName,
            });
            val.privateInfo = JSON.stringify(val.privateInfo);
            val.text=val.label
          }else if(val.fieldType === "HorizontalLine"||val.fieldType === "Tab"){
             val.text=val.label
          }
        });
        console.log(arr);
        this.$set(this, "formList", arr);
        this.tableType = tableType;
        this.canDelete = canDelete;
        console.log(res);
      });
    },
    delFrom(id) {
      this.$confirm("是否确认删除该表单?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        api.stdappTableDel({ tableId: id }).then((res) => {
          this.getlist();
          this.$message.success("删除成功");
          this.formList = [];
        });
      });
    },
    intoDataManage() {
      this.$router.push({
        name: "dataManage",
        query: { tableId: this.tableId, name: this.tableName },
      });
    },
    intoflowData() {
      this.$router.push({
        name: "flowData",
        query: {
          tableId: this.tableId,
          name: this.tableName,
          flowVersion: this.flowVersion,
        },
      });
    },
    editForm(id,isChild) {
      api.stdappTableDetail({ tableId: id }).then((res) => {
        console.log(res);
        this.$router.push({
          name: "designer",
          query: {
            tableType: res.tableType,
            tableId: res.tableId,
            name: res.tableName,
            canDelete: res.canDelete,
            moduleId: this.$route.query.id,
            groupName: res.groupName,
            isChild:isChild
          },
        });
      });
    },
    addFrom(tableType) {
      console.log(tableType);
      this.$router.push({
        name: "designer",
        query: { moduleId: this.$route.query.id, tableType: tableType,isChild:parseInt(tableType)===1?1:0 },
      });
    },
    submitForm() {
      const { tableId } = this;
      api.stdappTableLaunch({ tableId }).then((res) => {
        this.$message({
          type: "success",
          message: "发布成功!",
        });
        this.getDatils(tableId, this.currentIndex, this.flowVersion);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  box-sizing: border-box;
  padding: 0 20px;
  .content {
    box-sizing: border-box;
    display: flex;
    .menu {
      background-color: #ffffff;
      width: 200px;
      min-width: 170px;
      height: calc(100vh - 90px);
      overflow-y: auto;
      margin-right: 7px;
      .menu_title {
        box-sizing: border-box;
        padding: 0 19px 0 7px;
        height: 47px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 12px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(209, 209, 209, 1);
      }
      .menu_list {
        .menu_item {
          box-sizing: border-box;
          height: 40px;
          padding-left: 40px;
          padding-right: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: rgba(102, 102, 102, 1);
          font-size: 12px;
          cursor: pointer;
          &:hover {
            background-color: rgba(67, 201, 168, 0.2);
          }
        }
        .menu_item_active {
          background-color: rgba(67, 201, 168, 0.2);
        }
      }
      // .menu_item
    }
    .el-container {
      background-color: #ffffff;
      height: calc(100vh - 90px);
      overflow-y: auto;
      flex: 1;
      .el-main {
        padding: 0 20px 20px;
      }
      .con-t {
        box-sizing: border-box;
        height: 47px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 12px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        border-bottom: 1px solid rgba(209, 209, 209, 1);
      }
      .containermain {
        padding-top: 20px;
      }
    }
  }
}
// .h-content {
//   display: block;
//   height: 100%;
//   overflow-y: auto;
// }
// .el-main {
//   height: 100%;
//   padding: 0;
//   position: relative;
//   .con-t {
//     position: sticky;
//     width: 100%;
//     height: 50px;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     box-sizing: border-box;
//     padding: 0 20px;
//     background-color: #fff;
//     border-bottom: 1px solid #3c3c33;
//     margin: 0px;
//     top: 0px;
//     left: 0px;
//     z-index: 999;
//   }
//   .el-icon-s-unfold {
//     font-size: 30px;
//     cursor: pointer;
//   }
//   .containermain {
//     // background-color: red;
//     height: 80%;
//     padding: 20px;
//     .el-form {
//       width: 320px;
//     }
//   }
// }
// .menu_list {
//   height: 100%;
//   .menu_title {
//     width: 100%;
//     box-sizing: border-box;
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     p {
//       margin: 0px;
//     }
//   }
// }
// .el-container {
//   height: 100%;
// }
// .d-logo-wrapper {
//   display: flex;
//   align-items: center;
//   padding: 0 20px;
//   cursor: pointer;
// }
// .el-menu-vertical-demo {
//   height: 93%;
// }

// .headerTitle {
//   font-size: 20px;
//   margin-left: 10px;
//   color: #1f2d3d;
// }
</style>
